<template>
  <div>
    <el-button type="primary" plain @click="dialogFormVisible = true"
      >新增放映厅</el-button
    >
    <!-- 放映厅列表 -->
    <el-divider content-position="left"> 影厅列表 </el-divider>
    <el-table :data="rooms">
      <el-table-column label="放映厅名称" prop="room_name"></el-table-column>
      <el-table-column label="放映厅类型" prop="room_type"></el-table-column>
      <el-table-column label="放映厅数量">
        <template slot-scope="scope">
          {{ scope.row.room_size ? scope.row.room_size : "暂未配置座位模板" }}
        </template>
      </el-table-column>
      <el-table-column>
       <template slot-scope="scope">
          <el-button type="primary" size="small"
            icon="el-icon-edit" circle></el-button>
<!-- 需要传参页面的在跳转的地方后面要拼接上传递的参数 -->
          <el-button type="success" icon="el-icon-plus" @click="$router.push(`/home/showingonplan-add/${scope.row.id}`)"
          circle size="small"></el-button>
          <el-button type="warning" icon="el-icon-s-order" @click="$router.push(`/home/showingonplan-list/${scope.row.id}`)"
          circle size="small"></el-button>
          <el-button type="primary"  icon="el-icon-s-grid" circle size="small"
            @click="$router.push(`/home/seat-template/${scope.row.id}`)"></el-button>
        </template>  
       </el-table-column>
    </el-table>
    <!-- 对话框 : 添加放映厅的表单 -->
    <el-dialog title="新增放映厅" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="150" :rules="rules" ref="form">
        <el-form-item label="放映厅名称" prop="room_name">
          <el-input v-model="form.room_name"></el-input>
        </el-form-item>
        <el-form-item label="放映厅类型" prop="room_type">
          <el-select v-model="form.room_type" placeholder="请选择类型">
            <el-option
              v-for="item in types"
              :key="item.id"
              :label="item.type_name"
              :value="item.type_name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        movie_cinema_id: this.$route.params.cinema_id,
        room_name: "",
        room_type: "",
      },
      dialogFormVisible: false,
      types: [],
      rules: {
        room_name: [{ required: true, trigger: "blur", message: "必填" }],
        room_type: [{ required: true, trigger: "blur", message: "必填" }],
      },
      rooms:[]
    };
  },
  methods: {
    delItem(){

    },
    submit() {
      // 表单验证 : 请求参数!!!
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log(this.form);
          this.$http.cinemaRoomApi.add(this.form).then((res) => {
            console.log("添加影厅", res);
            if (res.data.code == 200) {
              this.$message({ type: "success", message: "添加成功" });
              this.dialogFormVisible = false;
              this.loadRooms()
            }
          });
        }
      });
      // 表单 : ref="form" ->this.$refs['form']  ;
      //       :rules="rules" -> vdata 中的 rules + <el-form-item label ="" prop=""></el-form-item>
    },
    loadRooms(){
        let params={cinema_id:this.form.movie_cinema_id}
    this.$http.cinemaRoomApi.list(params).then(res=>{
        console.log('rooms',res);
        this.rooms=res.data.data
    })
    }
  },
  mounted() {
    this.loadRooms()
    this.$http.cinemaRoomApi.queryAllTypes().then((res) => {
      console.log(res);
      this.types = res.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
</style>